<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <label for="">姓名：</label>
        <input type="text" class="username">
        <span class="user_span">用户名由数字字母组成的4-8位，数字不能开头</span>
    </div>
    <div>
        <label for="">手机号：</label>
        <input type="text" class="userPhone">
        <span class="phone_span">11位的手机号</span>
    </div>
    <div>
        <label for="">密码：</label>
        <input type="text" class="password">
        <span class="pass_span">密码由数字字母组成的6位</span>
    </div>
    <div>
        <label for="">验证码：</label>
        <input type="text" class="code">
        <span class="showCode">1d2s</span>
        <span class="code_span">验证码不分大小写</span>
    </div>

    <div>
        <button class="reg">注册</button>
    </div>

    <script>

        var oUser = get('.username');   // 自己封装的函数get ........
        var oReg = get('.reg');
        var oUserSpan = get('.user_span');



        var numArr = [];
        for (var i = 0; i <= 9; i++) {
            numArr.push(i + '');
        }


        var smallArr = [];
        for (var i = 97; i <= 122; i++) {
            smallArr.push(String.fromCharCode(i));
        }


        var bigArr = [];
        for (var i = 65; i <= 90; i++) {
            bigArr.push(String.fromCharCode(i));
        }

        var allArr = numArr.concat(smallArr, bigArr);
        console.log(allArr);






        // 绑定事件
        oReg.onclick = function () {
            // 用户名的验证    为空  长度不对  数字开头   非法   
            var username = oUser.value.trim();   // 去掉首尾空格
            // 为空
            if (username === '') {
                oUserSpan.innerHTML = '用户名不能为空';
                oUserSpan.style.color = 'red';
                return;
            }

            // 长度不对
            if (username.length > 8 || username.length < 4) {
                oUserSpan.innerHTML = '长度必须是4-8位';
                oUserSpan.style.color = 'red';
                return;
            }

            // 数字开头   --- 第一位是数字   username[0]
            if (numArr.includes(username[0])) {   // !isNaN()     0-9之间
                oUserSpan.innerHTML = '用户名不能数字开头';
                oUserSpan.style.color = 'red';
                return;
            }

            // 判断非法   数字和字母 
            for (var i = 0; i < username.length; i++) {
                if (!allArr.includes(username[i])) {
                    oUserSpan.innerHTML = '用户名不合法';
                    oUserSpan.style.color = 'red';
                    return;
                }
            }

            oUserSpan.innerHTML = '√';
            oUserSpan.style.color = 'green';



            // 密码判断：
            //    强弱的判断    
            //      如果都是数字或者都是小写或者都是大写 弱
            //      任意两个组合  中
            //      三种组合   安全

        }




        function get(el) {
            return document.querySelector(el);
        }

        function randCode() { }


    </script>



</body>

</html>